<template>
  <div class="home">
    <div class="banner">
      <!-- 1.轮播图组件 -->
      <!-- <Banner></Banner> -->
      <SwiperBanner></SwiperBanner>
      <!-- 2.搜索框内容 -->
      <div class="search">
        <div :class="{ bg: isShow }">
          <el-row>
            <el-col :span="8" :offset="8">
              <!-- 搜索框效果
                --1.聚焦显示热门城市
                --2.失去焦点热门城市隐藏
                --3.输入内容 显示搜索列表 热门城市隐藏
                --4.输入内容 又删除 输入的值为空 搜索列表隐藏 热门城市显示
                --5.输入的值存在 失去焦点 隐藏搜索列表
                --6.输入的值存在 聚焦     显示搜索列表
              -->
              <div class="input-bg">
                <el-input v-model="input" @focus="getInput" @blur="leaveInput" placeholder="请输入内容"></el-input>
              </div>
              <!-- 显示内容区域--热门城市 -->
              <div class="list" v-show="isShow">
                <p class="info">温馨提示: 可以直接输入城市的中文、英文来匹配搜索</p>
                <div class="title">热门城市</div>
                <div class="hot-city">
                  <a href="##" v-for="item in hotcity" :key="item.id">{{ item.name }}</a>
                </div>
              </div>
              <!-- 显示搜索的列表内容展示 -->
              <ul class="search-list" v-show="isShowList">
                <li v-for="item in searchList" :key="item.id">
                  {{ item.name }}<span>{{ item.en_name }} </span>
                  <!-- {{ item.city.name }} {{ item.province.name }} {{ item.country.name }}  -->
                </li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 今日推荐 -->
    <div class="section">
      <div class="wrapper">
        <div class="title-th">
          <a href="##" class="notice"><span>处境游安全提示</span></a>
          今日推荐
        </div>
        <div class="content">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item,index) in todayInfo" :key="index">
              <div class="item">
                <img :src="item.data.pic" width="275px" height="185px" alt="">
                <div class="info">
                  <div class="subtitle">{{ item.data.subject }}</div>
                  <div class="bottom">
                  <template v-if="(item.type==='video')">
                    <div class="fr">{{ item.data.tag }}</div>
                    <div class="f14">{{ item.data.desc }}</div>
                  </template>
                  <template v-else-if="(item.type==='bbs')">
                    <div class="fr">{{ item.data.views }}人浏览过</div>
                    <div class="f14">{{ item.data.username }}</div>
                  </template>
                  <template v-else>
                    <div class="fr money" v-html=" item.data.price "></div>
                    <div class="f14">{{ item.data.start_pos }}</div>
                  </template>
                  </div>
                </div>
              </div>
            </el-col>
            
          </el-row>
        </div>
      </div>

    </div>

    <!-- 穷游商城 -->
    <HomeShop :shopList = "shopList" @getMoreShop="getMoreShop"></HomeShop>

    <!-- 热门游记与话题 -->
    <HomeTravel></HomeTravel>
  </div>
</template>

<script>
import Banner from './banner/Banner.vue'
import SwiperBanner from './banner/SwiperBanner.vue';
import HomeShop from './shop/HomeShop.vue'
import HomeTravel from './travel/HomeTravel.vue'

export default {
  name: 'HomeView',
  components: {
    Banner,
    SwiperBanner,
    HomeShop,
    HomeTravel
  },
  data() {
    return {
      input: '',
      isShow: false,//是否显示热门城市
      isShowList: false,//是否显示搜索框
      hotcity: [],//热门城市的名称
      searchList: [],//搜索列表容器
      todayInfo:[],//今日推荐
      shopList:[],//商城列表
      page:1,//换一换的页码


    }
  },
  watch: {
    input(val, old) {
      if (!val) {
        this.isShow = true;
        this.isShowList = false;
        return '';
      }
      //输入值,热门城市隐藏,搜索列表展示
      this.isShow = false;
      this.isShowList = true;
      //网络请求-----
      this.$api.getSearch({
        keyword: val
      }).then(res => {
        console.log("搜索列表---网络请求---", res.data);
        this.searchList = res.data.data.list
      })
    }
  },
  methods: {
    //获取焦点显示下拉框
    getInput() {
      if (this.input) {
        this.isShowList = true;
        return;
      }
      this.isShow = true;
    },
    //失去焦点
    leaveInput() {
      this.isShow = false;
      this.isShowList = false;
    },
    //获取当前热门城市
    async getHotCity() {
      let res = await this.$api.getHotCity()
      console.log('获取当前热门城市-----', res.data.result.hotcity);
      this.hotcity = res.data.result.hotcity;
    },
    //获取今日推荐
    async getTodayInfo(){
      let res = await this.$api.getTodayInfo()
      console.log('获取今日推荐----',res.data.data)
      this.todayInfo = res.data.data;
    },
    //获取商城
    async getHomeShop(page){
      let res = await this.$api.getHomeShop(page)
      console.log('获取商城---',res.data);
      this.shopList = res.data.data
    },
    //换一换接口
    getMoreShop(){
      this.page++;
      this.getHomeShop({
        page:this.page
      });
    }

  },
  created() {
    //1.获取当前热门城市----
    this.getHotCity();
    //2.获取今日推荐----
    this.getTodayInfo();
    //3.获取商城接口
    this.getHomeShop({
      page:this.page
    }); 
  }
}
</script>


<style lang="less" scoped>
.bg {
  background: rgba(255, 255, 255, 0.5);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding-top: 225px;
}

.banner {
  position: relative;

  .search {
    position: absolute;
    width: 100%;
    // margin: 0 auto;
    top: 50%;
    z-index: 99;

    .input-bg {
      border-radius: 6px;
      // height: 80px;
      background-image: linear-gradient(90deg, rgba(40, 213, 164, 0.8), rgba(38, 208, 181, 0.8));
      display: flex;
      align-items: center;
      padding: 10px;
    }
  }

  //热门城市
  .list {
    width: 100%;
    height: 240px;
    background: #fff;
    box-sizing: border-box;
    padding: 20px;

    .info {
      font-size: 12px;
      color: #999;
    }

    .title {
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }

    .hot-city {
      a {
        display: inline-block;
        margin: 20px 20px 10px 0;
        font-size: 14px;
        color: 666;
        text-decoration: none;
      }
    }
  }

  //搜索列表容器
  .search-list {
    width: 100%;
    min-height: 60px;
    background: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 6px;
    margin-top: -5px;

    li {
      // line-height: ;
      padding: 10px;
    }
  }



}
//居中容器--------------
.section {
  position: relative;
  padding: 10px 0;
  min-width: 1160px;
}

.wrapper {
  margin: 0 auto;
  width: 1160px;
  position: relative;
}

//今日推荐
.title-th {
  margin: 10px;
  height: 74px;
  color: #636363;
  text-align: center;
  font: 36px/74px Hiragino Sans GB, Microsoft YaHei, SimHei, SimSun, sans-serif;

  .notice {
    background: #02db94;
    border-radius: 20px;
    width: 180px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: block;
    position: absolute;
    left: 0;
    top: 17px;

    span:before {
      content: "";
      display: inline-block;
      background: url(https://fes.qyerstatic.com/FoHcIRgBY9BWd6lSLxr6NVArmEaL);
      background-size: 16px 16px;
      vertical-align: -2px;
      height: 16px;
      width: 16px;
      margin-right: 8px;
    }

    span:after {
      content: "";
      display: inline-block;
      background: url(https://fes.qyerstatic.com/FkvmdDl4snzkbZzyQCrfMQMBeicW);
      background-size: 7px 11px;
      width: 7px;
      height: 11px;
      margin-left: 8px;
    }
  }
}

.content {

  .item {
    width: 275px;
    height: 300px;
    margin-bottom: 20px;
   
  }

  .info {
    padding: 0 18px;
    border: 1px solid #ececec;
    border-top: 0;
    height: 114px;
    line-height: 24px;
    overflow: hidden;

    .subtitle {
      margin-top: 14px;
      height: 48px;
      font-size: 16px;
      overflow: hidden;
    }

    .bottom {
      margin-top: 16px;
      height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #636363;
      font-size: 12px;
      font-weight: 700;

      .fr {
        color: #959595;
        float: right;

      }
      .money{
        /deep/em{
          color: #ff7466;
          font-size: 18px !important;
        }
      }

      .f14 {
        display: inline-block;
        max-width: 60%;
        min-width: 50%;
        color: #636363;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
</style>
